<template>
  <div class="fly-panel fly-signin">
    <div class="fly-panel-title">
      签到
      <i class="fly-mid"></i>
      <a href="javascript:;" class="fly-link" @click="showInfo()">说明</a>
      <i class="fly-mid"></i>
      <a href="javascript:;" class="fly-link" @click="showActList()">
        活跃榜
        <span class="layui-badge-dot"></span>
      </a>
      <span class="fly-signin-days" v-if="isLogin">
        已连续签到
        <cite>{{count}}</cite>天
      </span>
    </div>
    <div class="fly-panel-main fly-signin-main">
      <template v-if="!isSign">
        <button class="layui-btn layui-btn-danger" @click="sign">今日签到</button>
        <span>
          可获得
          <cite>{{favs}}</cite>飞吻
        </span>

      </template>

      <!-- 已签到状态 -->
      <template v-else>
        <button class="layui-btn layui-btn-disabled" >今日已签到</button>
        <span>
          获得了
          <cite>{{favs}}</cite>飞吻
        </span>
      </template>
       <SignInfo :isShow="isShow" @closeModal="closeModal"></SignInfo>
        <SignList :isShow="showList" @closeModal="closeModal"></SignList>
    </div>
  </div>
</template>

<script>
import SignInfo from './SignInfo'
import SignList from './SignList'
import { getSign } from '@/api/user.js'
import moment from 'moment'
export default {
  name: 'sign',
  components: {
    SignInfo,
    SignList
  },
  data () {
    return {
      isSign: false,
      isShow: false,
      showList: false
    }
  },
  watch: {
    userInfo (newVal, oldVal) {
      if (newVal.isSign === true) {
        this.isSign = true
      } else {
        this.isSign = false
      }
    }
  },
  mounted () {
    const isSign = this.$store.state.userInfo.isSign
    const lastSign = this.$store.state.userInfo.lastSign
    const nowDate = moment().format('YYYY-MM-DD')
    const lastDate = moment(lastSign).format('YYYY-MM-DD')
    if (moment(nowDate).diff(lastDate, 'day') > 0 && isSign) {
      this.isSign = false
    }
    this.isSign = isSign
  },
  computed: {
    userInfo () {
      return this.$store.state.userInfo
    },
    isLogin () {
      return this.$store.state.isLogin
    },
    favs () {
      let count = parseInt(this.count)
      let fav = 0
      if (!this.isSign) {
        count++
      }
      if (count < 5) {
        fav = 5
      } else if (count >= 5 && count < 15) {
        fav = 10
      } else if (count >= 15 && count < 30) {
        fav = 15
      } else if (count >= 30 && count < 100) {
        fav = 20
      } else if (count >= 100 && count < 365) {
        fav = 30
      } else if (count >= 365) {
        fav = 50
      }
      return fav
    },
    count () {
      if (this.$store.state.userInfo) {
        return this.$store.state.userInfo.count
      }
      return 0
    }
  },
  methods: {
    showInfo () {
      this.isShow = true
    },
    showActList () {
      this.showList = true
    },
    closeModal () {
      this.isShow = false
      this.showList = false
    },
    async sign () {
      if (!this.isLogin) {
        return
      }
      const res = await getSign()
      const user = this.$store.state.userInfo
      if (res.code === 200) {
        user.favs = res.favs
        user.count = res.count
      } else {
        this.$pop('', '您今日已经签到')
      }
      this.isSign = true
      user.isSign = true
      user.lastSign = res.lastSign
      this.$store.commit('setUserInfo', user)
    }
  }
}
</script>

<style lang="scss">
@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.mask {
  background-color: rgba(0, 0, 0, 0.8);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 20000;
}
.layui-layer {
  position: fixed;
  width: 300px;
  height: 480px;
  left: 50%;
  top: 50%;
  margin-top: -240px;
  margin-left: -150px;
  z-index: 21000;
  background: #fff;
  &.active {
    animation: bounceIn 0.2s both;
  }
  .layui-layer-title {
    height: 42px;
    line-height: 42px;
    padding: 0 20px;
    color: #333;
    background: #f8f8f8;
    .layui-icon-close {
      cursor: pointer;
    }
  }
  .layui-layer-content {
    padding: 20px;
  }
  .layui-tab-content {
    padding: 0 10px;
  }
  .layui-tab-item {
    line-height: 45px;
    li {
      border-bottom: 1px dotted #dcdcdc;
      &:last-child {
        border-bottom: none;
      }
    }
    img {
      width: 30px;
      height: 30px;
      border-radius: 2px;
    }
  }
}
</style>
